#dashboard{
    width:320px;
    height:420px;
    margin:0px;
    padding:0px;
    position:relative;
}
.iconGradient{

	background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.6) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0.6))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.6) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.6) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.6) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.6) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

.dashIconImageOut{
    height:0px;
    margin: 0px;
    padding: 0px;
    border: none;
    
    transition: height 500ms;
    -moz-transition: height 500ms;
    -webkit-transition: height 500ms;
    -o-transition: height 500ms;
}
.dashIconImage{
    height:22px;
    margin: 0px;
    padding: 0px;
    border: none;
    
    transition: height 500ms;
    -moz-transition: height 500ms;
    -webkit-transition: height 500ms;
    -o-transition: height 500ms;
}
.naviButtonSolo{
	width:50px;
	height:50px;
	position:absolute;
	left:250px;
	top:-60px;	
	z-index:4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;
}

div.underlayer-out{
	position:absolute;
	background-color:rgba(0,0,0,0.5);	
	height:0%;
	width:0%;
	top:0px;
	left:0px;
		
	opacity: 0;
	transition: opacity 500ms  linear;
	-moz-transition: opacity 500ms  linear;
    -webkit-transition:  opacity 500ms  linear;
    -o-transition: opacity 500ms  linear;

}

div.underlayer-in{
	position:absolute;
	background-color:rgba(0,0,0,0.5);
	height:100%;
	width:100%;
	top:0px;
	left:0px;
 	
 	opacity: 1;
 	transition: opacity 500ms  linear;
    -moz-transition: opacity 500ms  linear;
    -webkit-transition:  opacity 500ms  linear;
    -o-transition:  opacity 500ms  linear;

}

.fly-out1{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;
    float:left;
   
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
        
    animation: fly-out1 500ms ;
    -moz-animation: fly-out1 500ms ; /* Firefox */
    -webkit-animation: fly-out1 500ms ; /* Safari and Chrome */  
   
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	 
}

.fly-out2{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute; 
 
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out2 500ms ;
    -moz-animation: fly-out2 500ms ; /* Firefox */
    -webkit-animation: fly-out2 500ms ; /* Safari and Chrome */    

    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-out3{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;
    float:left;
   	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-out3 500ms ;
    -moz-animation: fly-out3 500ms ; /* Firefox */
    -webkit-animation: fly-out3 500ms ; /* Safari and Chrome */ 
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	   
}

.fly-out4{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;	

	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out4 500ms ;
    -moz-animation: fly-out4 500ms ; /* Firefox */
    -webkit-animation: fly-out4 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-out5{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;	
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out5 500ms ;
    -moz-animation: fly-out5 500ms ; /* Firefox */
    -webkit-animation: fly-out5 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}
.fly-out6{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;	
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out6 500ms ;
    -moz-animation: fly-out6 500ms ; /* Firefox */
    -webkit-animation: fly-out6 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}


.fly-out7{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;	

	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out7 500ms ;
    -moz-animation: fly-out7 500ms ; /* Firefox */
    -webkit-animation: fly-out7 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-out8{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;	
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out8 500ms ;
    -moz-animation: fly-out8 500ms ; /* Firefox */
    -webkit-animation: fly-out8 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}
.fly-out9{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;	
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out9 500ms ;
    -moz-animation: fly-out9 500ms ; /* Firefox */
    -webkit-animation: fly-out9 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}


.fly-out10{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;	

	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out10 500ms ;
    -moz-animation: fly-out10 500ms ; /* Firefox */
    -webkit-animation: fly-out10 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-out11{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;	
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out11 500ms ;
    -moz-animation: fly-out11 500ms ; /* Firefox */
    -webkit-animation: fly-out11 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}
.fly-out12{
    width:0px;
    height:0px; 
	left:86%; 
	top:95%;
	position:absolute;	
	font-size: 1px;
    text-transform: capitalize;
    font-family: arial;
    
    opacity: 0;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-out12 500ms ;
    -moz-animation: fly-out12 500ms ; /* Firefox */
    -webkit-animation: fly-out12 500ms ; /* Safari and Chrome */
    
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}



.fly-in1{
    width:70px;
    height:50px;
	position:absolute;
	left:7%; 
	top:25%; 
    z-index:1000;
    float:left;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-in1 500ms ;
    -moz-animation: fly-in1 500ms ; /* Firefox */
    -webkit-animation: fly-in1 500ms ; /* Safari and Chrome */

    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	

} 



.fly-in2{
    width:70px;
    height:50px;
	position:absolute;
    left:39%;
    top:25%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;
         
    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-in2 500ms ;
    -moz-animation: fly-in2 500ms ; /* Firefox */
    -webkit-animation: fly-in2 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in3{
    width:70px;
    height:50px;
    position:absolute;
    left:70%;
    top:25%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    float:left;    
      
    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    
    animation: fly-in3 500ms ;
    -moz-animation: fly-in3 500ms ; /* Firefox */
    -webkit-animation: fly-in3 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in4{
    width:70px;
    height:50px;
	position:absolute;
    left:7%;
    top:40%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in4 500ms ;
    -moz-animation: fly-in4 500ms ; /* Firefox */
    -webkit-animation: fly-in4 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in5{
    width:70px;
    height:50px;
	position:absolute;
    left:39%; 
    top:40%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    float:left;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in5 500ms ;
    -moz-animation: fly-in5 500ms ; /* Firefox */
    -webkit-animation: fly-in5 500ms ; /* Safari and Chrome */
    
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in6{
    width:70px;
    height:50px;
    position:absolute;
    left:70%;
    top:40%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in6 500ms ;
    -moz-animation: fly-in6 500ms ; /* Firefox */
    -webkit-animation: fly-in6 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}


.fly-in7{
    width:70px;
    height:50px;
	position:absolute;
    left:7%;
    top:55%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in7 500ms ;
    -moz-animation: fly-in7 500ms ; /* Firefox */
    -webkit-animation: fly-in7 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in8{
    width:70px;
    height:50px;
	position:absolute;
    left:39%; 
    top:55%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    float:left;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in8 500ms ;
    -moz-animation: fly-in8 500ms ; /* Firefox */
    -webkit-animation: fly-in8 500ms ; /* Safari and Chrome */
    
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in9{
    width:70px;
    height:50px;
    position:absolute;
    left:70%;
    top:55%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in9 500ms ;
    -moz-animation: fly-in9 500ms ; /* Firefox */
    -webkit-animation: fly-in9 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in10{
    width:70px;
    height:50px;
	position:absolute;
    left:7%;
    top:70%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in10 500ms ;
    -moz-animation: fly-in10 500ms ; /* Firefox */
    -webkit-animation: fly-in10 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in11{
    width:70px;
    height:50px;
	position:absolute;
    left:39%; 
    top:70%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    float:left;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in11 500ms ;
    -moz-animation: fly-in11 500ms ; /* Firefox */
    -webkit-animation: fly-in11 500ms ; /* Safari and Chrome */
    
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}

.fly-in12{
    width:70px;
    height:50px;
    position:absolute;
    left:70%;
    top:70%;
    z-index:1000;
    font-size: 11px;
    text-transform: capitalize;
    font-family: arial;

    opacity: 1;
    transition: width 500ms , height 500ms , opacity 500ms , font-size 500ms  linear;
    -moz-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -webkit-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;
    -o-transition: width 500ms , height 500ms , opacity 500ms  , font-size 500ms  linear;

    animation: fly-in12 500ms ;
    -moz-animation: fly-in12 500ms ; /* Firefox */
    -webkit-animation: fly-in12 500ms ; /* Safari and Chrome */
        
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
 	border: 1px solid #666666;	
}
/*Animation*/ 


/*Menupoints in dashboard*/ 
@keyframes fly-in1
{
0%      {
			
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:25%;
		}
}


@-moz-keyframes fly-in1 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {	
			left:7%; 
			top:25%;
		}
}


@-webkit-keyframes fly-in1 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:25%;
		}
}

@keyframes fly-in2
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:25%;
		}
}


@-moz-keyframes fly-in2 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:25%;
		}
}


@-webkit-keyframes fly-in2 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:25%;
		}
}

@keyframes fly-in3
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
		}
100%    {
			left:70%; 
			top:25%;
		}
}


@-moz-keyframes fly-in3 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
		}
100%    {
			left:70%; 
			top:25%;
		}
}


@-webkit-keyframes fly-in3 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:25%;
		}
}

@keyframes fly-in4
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:40%;
		}
}


@-moz-keyframes fly-in4 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:40%;
		}
}


@-webkit-keyframes fly-in4 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {	
			left:7%; 
			top:40%;
		}
}


@keyframes fly-in5
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:40%;
		}
}


@-moz-keyframes fly-in5 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:40%;
		}
}


@-webkit-keyframes fly-in5 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:40%;
		}
}

@keyframes fly-in6
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:40%;
		}
}


@-moz-keyframes fly-in6 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:40%;
		}
}


@-webkit-keyframes fly-in6 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:40%;
		}
}

@keyframes fly-in7
{
0%      {
			
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:55%;
		}
}


@-moz-keyframes fly-in7 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {	
			left:7%; 
			top:55%;
		}
}


@-webkit-keyframes fly-in7 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:55%;
		}
}

@keyframes fly-in8
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:55%;
		}
}


@-moz-keyframes fly-in8 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:55%;
		}
}


@-webkit-keyframes fly-in8 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:55%;
		}
}

@keyframes fly-in9
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
		}
100%    {
			left:70%; 
			top:55%;
		}
}


@-moz-keyframes fly-in9 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
		}
100%    {
			left:70%; 
			top:55%;
		}
}


@-webkit-keyframes fly-in9 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:55%;
		}
}

@keyframes fly-in10
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:70%;
		}
}


@-moz-keyframes fly-in10 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:7%; 
			top:70%;
		}
}


@-webkit-keyframes fly-in10 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {	
			left:7%; 
			top:70%;
		}
}


@keyframes fly-in11
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:70%;
		}
}


@-moz-keyframes fly-in11 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:70%;
		}
}


@-webkit-keyframes fly-in11 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:39%; 
			top:70%;
		}
}

@keyframes fly-in12
{
0%      {
			transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:70%;
		}
}


@-moz-keyframes fly-in12 /* Firefox */
{
0%      {
			-moz-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:70%;
		}
}


@-webkit-keyframes fly-in12 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(360deg);
			left:86%; 
			top:95%;
     	}
100%    {
			left:70%; 
			top:70%;
		}
}


/*FlyOut-Animation*/
@keyframes fly-out1
{
0%   	 {
			transform:rotate(-360deg);
			left:7%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
     	}
}

@-moz-keyframes fly-out1 /* Firefox */
{
0%    	{
			-moz-transform:rotate(-360deg);
			left:7%;
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
     	}
}


@-webkit-keyframes fly-out1 /* Safari and Chrome */
{
0%    	{
			-webkit-transform:rotate(-360deg);
			left:7%;
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
     	}
}

@keyframes fly-out2
{
0%      {
			transform:rotate(-360deg);
			left:39%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out2 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:39%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@-webkit-keyframes fly-out2 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:39%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out3
{
0%      {
			transform:rotate(-360deg);
			left:70%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@-moz-keyframes fly-out3 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:70%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out3 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:70%; 
			top:25%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out4
{
0%      {
			transform:rotate(-360deg);
			left:7%;
			top:40%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out4 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:7%; 
			top:40%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out4 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:7%;
			top:40%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out5
{
0%      {
			transform:rotate(-360deg);
			left:39%; 
			top:40%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out5 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:39%; 
			top:40%
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out5 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:39%; 
			top:40%
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out6
{
0%      {
			transform:rotate(-360deg);
			left:70%; 
			top:40%
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out6 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:70%; 
			top:40%
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out6 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:70%; 
			top:40%
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out7
{
0%   	 {
			transform:rotate(-360deg);
			left:7%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
     	}
}


@-moz-keyframes fly-out7 /* Firefox */
{
0%    	{
			-moz-transform:rotate(-360deg);
			left:7%;
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
     	}
}


@-webkit-keyframes fly-out7 /* Safari and Chrome */
{
0%    	{
			-webkit-transform:rotate(-360deg);
			left:7%;
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
     	}
}

@keyframes fly-out8
{
0%      {
			transform:rotate(-360deg);
			left:39%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out8 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:39%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@-webkit-keyframes fly-out8 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:39%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out9
{
0%      {
			transform:rotate(-360deg);
			left:70%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@-moz-keyframes fly-out9 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:70%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out9 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:70%; 
			top:55%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out10
{
0%      {
			transform:rotate(-360deg);
			left:7%;
			top:70%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out10 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:7%; 
			top:70%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out10 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:7%;
			top:70%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out11
{
0%      {
			transform:rotate(-360deg);
			left:39%; 
			top:70%;
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out11 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:39%; 
			top:70%
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out11 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:39%; 
			top:70%
		}
100%	{
			left:86%; 
			top:95%;
		}
}

@keyframes fly-out12
{
0%      {
			transform:rotate(-360deg);
			left:70%; 
			top:70%
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-moz-keyframes fly-out12 /* Firefox */
{
0%      {
			-moz-transform:rotate(-360deg);
			left:70%; 
			top:70%
		}
100%	{
			left:86%; 
			top:95%;
		}
}


@-webkit-keyframes fly-out12 /* Safari and Chrome */
{
0%      {
			-webkit-transform:rotate(-360deg);
			left:70%; 
			top:70%
		}
100%	{
			left:86%; 
			top:95%;
		}
}